<template>
  <div class="permission-container">
    <div class="app-container">
      <page-tools>
        <template #slot-left>
          <span />
        </template>
        <template #slot-right>
          <div style="text-align: right; margin-bottom: 20px">
            <el-button
              type="primary"
              size="small"
              @click="addPermissionFn(1,'0')"
            >添加权限</el-button>
          </div>
        </template>
      </page-tools>
      <!-- 表格 -->
      <el-card class="card">
        <el-table
          border
          :data="allPermissionList"
          row-key="id"
        >
          <el-table-column
            label="名称"
            prop="name"
          />
          <el-table-column
            label="标识"
            prop="code"
          />
          <el-table-column
            label="描述"
            prop="description"
          />
          <el-table-column label="操作">
            <template v-slot="{row}">
              <el-button
                v-if="row.type===1"
                type="text"
                @click="addPermissionFn(2,row.id)"
              >添加</el-button>
              <el-button
                type="text"
                @click="editPermissionFn(row.id)"
              >编辑</el-button>
              <el-button
                type="text"
                @click="delPermissionFn(row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 弹窗 -->
      <per-dialog
        ref="perDialog"
        :is-edit="isEdit"
        :permission-list="permissionList"
        @addPerEV="addPerFn"
      />
    </div>
  </div>
</template>

<script>
import { getPermissionListAPI, addPermissionAPI, getPermissionDetailAPI, updatePermissionAPI, delPermissionAPI } from '@/api' //
import { transTree } from '@/utils'
import PerDialog from './components/PerDialog.vue'
export default {
  components: {
    PerDialog
  },
  data() {
    return {
      // showPerDialog: false, // 控制弹窗出现
      allPermissionList: [], // 保存所有权限列表(树形的)
      permissionList: [], // 扁平的所有权限列表
      isEdit: false // 区别添加和编辑状态
    }
  },
  created() {
    // 获取所有权限列表方法
    this.getPermissionListFn()
  },
  methods: {
    // 调用接口-获取所有权限列表
    async getPermissionListFn() {
      const res = await getPermissionListAPI()
      // transTree内部在查找的时候，参数2，要传递父级id(递归找子对象)
      // 目标：为了让pid为'0'的对象，在数组里第一层
      this.permissionList = res.data
      this.allPermissionList = transTree(res.data, '0')
    },
    // 添加权限按钮点击事件
    // type===1 pid='0' 点击的是右上角权限点添加按钮
    // type===2 pid=row.id 点击的是页面子部门的权限添加按钮
    // type和pid是要给新对象pid使用
    addPermissionFn(type, pid) {
      this.isEdit = false
      this.$refs.perDialog.showDialog = true
      this.$refs.perDialog.formData.type = type
      this.$refs.perDialog.formData.pid = pid
      // 上面两句代码表示，给表单组件弹框里组件对象添加2个值，其他4个值是表单对象里用户输入的
    },
    // 添加/编辑权限点击按钮方法
    async addPerFn(fd) {
      if (this.isEdit) {
        await updatePermissionAPI(fd)
      } else {
        await addPermissionAPI(fd)
      }
      this.getPermissionListFn()
    },
    // 编辑权限点击按钮方法---数据回显
    async editPermissionFn(perId) {
      this.isEdit = true
      this.$refs.perDialog.showDialog = true
      const res = await getPermissionDetailAPI(perId)
      this.$refs.perDialog.formData = res.data // 权限详情数据回显到表单上
    },
    // 删除权限点的点击事件
    async delPermissionFn(perId) {
      await delPermissionAPI(perId)
      this.getPermissionListFn()
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  margin-top: 10px;
}
</style>
